import { Component, Fragment } from "react";


class EditInput extends Component {
    constructor(props){
        super(props)
        this.handleChange = this.handleChange.bind(this)
        this.state={
            value:"# hhh"
        }
    }
    // 生命周期函数
    componentDidMount() {
        this.props.onMyInputChange(this.state.value)
    }

    handleChange(event){
        // console.log(event.target.value)
        this.setState({
            value:event.target.value
        })
        // 调用父组件传入的函数
        // 子组件 -> 父组件
        // 子组件调用父组件传入的事件
        this.props.onMyInputChange(this.state.value)
    }
    render() {
        return (
            <Fragment>
                <div>EditInput</div>
                <h1>Markdown编辑器</h1>
                <label htmlFor="editor">Enter some markdown</label>
                <br />
                <textarea
                    id="editor"
                    defaultValue={this.state.value}
                    onChange={this.handleChange}
                />

            </Fragment>

        )
    }
}


export default EditInput